<template>
  <div class="login-register-container">
    <h2>{{ isLogin ? '登录' : '注册' }}</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="username" type="text" maxlength="20" required />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="password" type="password" maxlength="20" required />
      </div>
      <div class="form-actions">
        <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
        <button type="button" @click="toggleMode">
          {{ isLogin ? '没有账号？注册' : '已有账号？登录' }}
        </button>
      </div>
      <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['login-success'])
const isLogin = ref(true)
const username = ref('')
const password = ref('')
const errorMsg = ref('')

const toggleMode = () => {
  isLogin.value = !isLogin.value
  errorMsg.value = ''
}

const handleSubmit = async () => {
  errorMsg.value = ''
  if (!username.value.trim() || !password.value.trim()) {
    errorMsg.value = '用户名和密码不能为空'
    return
  }
  const url = isLogin.value ? 'http://localhost:3000/login' : 'http://localhost:3000/register'
  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: username.value.trim(), password: password.value.trim() })
    })
    const data = await res.json()
    if (!data.success) {
      errorMsg.value = data.msg || '请求失败'
      return
    }
    if (isLogin.value) {
      // 登录成功，通知父组件
      emit('login-success', data.user)
    } else {
      // 注册成功，自动切换到登录
      errorMsg.value = '注册成功，请登录'
      isLogin.value = true
    }
  } catch (e) {
    errorMsg.value = '网络错误或服务器无响应'
  }
}
</script>

<style scoped>
.login-register-container {
  max-width: 350px;
  margin: 80px auto;
  padding: 32px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  text-align: center;
}
.login-register-container h2 {
  margin-bottom: 24px;
  font-weight: 600;
  color: #1976d2;
}
.form-group {
  margin-bottom: 18px;
  text-align: left;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
}
.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus {
  border-color: #1976d2;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.form-actions button {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: #1976d2;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.form-actions button[type="button"] {
  background: #e1e5e9;
  color: #1976d2;
}
.form-actions button:hover {
  background: #125ea6;
}
.error-msg {
  margin-top: 16px;
  color: #f44336;
  font-size: 0.95rem;
}
</style>
